<!-- home -->
<template>
  <page-view>
    <top-bar :title="titAderess"
             :white="false">
    </top-bar>
    <page-content class="product">
      <div class="bind-container">
        <div class="bd-cocent">
          <div class="bd-first">
            <div class="bd-bn">
              <p>{{adressTit}}地址<span>*</span></p>
            </div>
            <input type="text"
                   class="bd-adress"
                   :placeholder="pAderss"
                   v-model="adress">
          </div>
          <div class="bd-first"
               id="bd_second">
            <div class="bd-bn">
              <p>短信验证<span>*</span></p>
            </div>
            <input type="text"
                   class="bd-adress"
                   placeholder="请输入短信验证码"
                   v-model="code">
            <van-button class="bd-message"
                        :loading="codeLoading"
                        :disabled="adress == '' || down"
                        round
                        @click="getCode"
                        type="info">
              <span v-if="!down">发送验证码</span>
              <van-count-down v-if="down"
                              @finish="
                              finish"
                              :time="time"
                              format="ss秒" />
            </van-button>
            <!-- <div class="bd-message"
                 @click="getCode">获取验证码</div> -->
          </div>
        </div>
        <div class="bd-word">
          <p class="bd-ts">温馨提示</p>
          <p>1、带*号的选项为必填项</p>
          <p>2、用户信息仅限于绑定，平台保障用户信息安全；</p>
        </div>
        <van-button round
                    type="info"
                    class="bd-btn"
                    @click="submit">提交</van-button>

      </div>
    </page-content>
  </page-view>
</template>

<script>
import Vue from 'vue';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';
import { Dialog, Toast } from 'vant';
export default {
  components: {
    TopBar,
    PageView,
    PageContent
  },
  data () {
    return {
      coinType: null,
      adress: "",
      code: null,
      accountList: {},
      adressTit: null,
      titAderess: null,
      pAderss: null,
      time: 60000,
      codeLoading: false,
      down: false,
    }
  },
  created () {
    //获取币的类型
    this.coinType = this.$route.params.coinType
    this.judge()
  },
  methods: {
    finish () {
      this.down = false;
    },
    //获取币的种类进行显示
    judge () {
      if (this.coinType == '0') {
        this.adressTit = 'BZZ'
        this.titAderess = '绑定BZZ地址'
        this.pAderss = '请输入BZZ钱包地址'
      } else if (this.coinType == '1') {
        this.adressTit = 'XCH'
        this.titAderess = '绑定XCH地址'
        this.pAderss = '请输入XCH钱包地址'
      }
    },
    //短信接口
    getCode () {
      return service.post('/apiGetVerCode.do', {
        type: 3
      }, {
        hideloading: true
      }).then(res => {
        this.down = true;
        this.codeLoading = false;
      }, () => {
        this.codeLoading = false;
      })
    },
    //提交数据
    submit () {
      if (this.adress == '' || this.adress == null || this.code == null || this.code == '') {
        Dialog({
          title: '提示',
          message: '必填项不能为空！'
        })
        return;
      } else {
        return service.post('/apiSetAccount.do', {
          currency: this.coinType,
          account_no: this.adress,
          code: this.code
        }).then(res => {
          this.$router.back()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bind-container {
  width: 100vw;
  background: #f2f1f8;
  overflow: hidden;
  text-align: center;
  .d-tit {
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 39px;
    padding: 0 20px;
    top: 3px;
    .p-back {
      width: 22px;
      height: 22px;
      vertical-align: middle;
      position: absolute;
      left: 20px;
    }
    .p-center {
      width: auto;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #000;
      line-height: 28px;
      margin: 0 auto;
      vertical-align: middle;
      display: inline-block;
    }
  }
  .bd-cocent {
    width: 100%;
    height: 207px;
    background: #ffffff;
    box-shadow: 0px 1px 0px 0px #f2f1f8, 0px 1px 0px 0px #f2f1f8;
    margin-top: 8px;
    box-sizing: border-box;
    padding: 13px 20px;
    // margin-top: 70px;
    .bd-first {
      width: 100%;
      height: 68px;
      position: relative;
      .bd-bn {
        display: flex;
        justify-content: space-between;
        .bd-sys {
          width: 19px;
          height: 19px;
        }
        p {
          height: 18px;
          font-size: 13px;
          font-weight: 500;
          color: #3d3e54;
          line-height: 18px;
          span {
            color: red;
          }
        }
      }
      .bd-message {
        position: absolute;
        // width: 327px;
        height: 29px;
        font-size: 13px;
        font-weight: 400;
        color: #585df9;
        line-height: 29px;
        right: 0px;
        top: 35px;
        text-align: right;
        background-color: transparent;
        border: none;
      }
    }
    .bd-adress {
      width: 100%;
      height: 35px;
      line-height: 35px;
      border: 0;
      border-bottom: 2px solid #cbf5f4;
      font-size: 13px;
      font-weight: 400;
      color: #7a7886;
      margin-top: 10px;
    }
  }
  .bd-word {
    padding: 0 20px;
    margin-top: 26px;
    height: auto;
    text-align: left;
    p {
      color: #7a7886;
      height: 18px;
      font-size: 13px;
      font-weight: 500;
      line-height: 18px;
    }
    .bd-ts {
      font-weight: 500;
    }
  }
  .bd-btn {
    width: 335px;
    height: 57px;
    line-height: 57px;
    text-align: center;
    background: #585df9;
    border-radius: 29px;
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 175px;
  }
  #bd_second {
    margin-top: 23px;
  }
}
</style>
